/* eslint-disable react-hooks/rules-of-hooks */
import {
  PageContainer,
  ProCard,
  ProFormSelect,
  ProFormText,
  ModalForm,
} from '@ant-design/pro-components';

import {
  Button,
  Col,
  Divider,
  Form,
  Input,
  Modal,
  Row,
  Select,
  Space,
  Tabs,
} from 'antd';
import { useState } from 'react';

import localStorage from "localStorage";

const { Option } = Select;
const { Search } = Input;

const ProjectToolPage = () => {
  const labelNodes = [
    {
      value: 'GET',
    },
    {
      value: 'POST',
    },
    {
      value: 'DELETE',
    },
  ];

  const selectBefore = (
    <Select defaultValue="http://">
      <Option value="http://">http://</Option>
      <Option value="https://">https://</Option>
    </Select>
  );

  const handleOnSearch = () => {};

  const onChange = (key) => {
    console.log(key);
  };

  const [headerInputs, setHeaderInputs] = useState([]); // 初始化为空数组

  const handleDeleteHeaderInput = (index) => {
    console.log(index);
    headerInputs.splice(index, 1); // 从数组中移除指定索引位置的输入框
    setHeaderInputs([...headerInputs]); // 更新状态
  };
  const handleHeaderInput = () => {
    setHeaderInputs([
      ...headerInputs,
      <div key={Date.now()}>
        <Space.Compact size="large">
          <Input placeholder="key" />
          <Input placeholder="value" />
        </Space.Compact>
      </div>,
    ]);
  };

  const [modalVisit, setModalVisit] = useState(false);

  const [formRef] = Form.useForm();

  const showModal = () => {
    formRef.resetFields()
    setModalVisit(true);
  };

  const handleHeader = (values) =>{
    let headers = localStorage.getItem("headers");
    if(headers === null) {
      let obj = {}
      obj[values.key] = values.value
      localStorage.setItem("headers", JSON.stringify(obj))
    }else{
      let obj = JSON.parse(headers)
      obj[values.key] = values.value
      localStorage.setItem("headers", JSON.stringify(obj))
    }
  
    console.log(localStorage.getItem('headers'))
  }

  const items = [
    {
      key: '1',
      label: 'Header',
      children: (
        <div>
          <Button
            type="dashed"
            style={{ marginBottom: '10px' }}
            onClick={showModal}
          >
            +
          </Button>
        </div>
      ),
    },
    {
      key: '2',
      label: 'Tab 2',
      children: 'Content of Tab Pane 2',
    },
    {
      key: '3',
      label: 'Tab 3',
      children: 'Content of Tab Pane 3',
    },
  ];



  return (
    <PageContainer>
      <ProCard>
        <Form>
          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
            <Col span={6}>
              <ProFormText name="methodName" placeholder="请输入方法名称" />
            </Col>
          </Row>
          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
            <Col span={4}>
              <ProFormSelect
                name="requestType"
                placeholder={'请选择请求方式'}
                options={labelNodes}
              />
            </Col>
            <Col span={16}>
              <Search
                addonBefore={selectBefore}
                placeholder="请输入请求路径"
                allowClear
                enterButton="发送"
                size="middle"
                onSearch={() => handleOnSearch()}
              />
            </Col>
          </Row>
          <Divider></Divider>
          <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
            <Tabs defaultActiveKey="1" items={items} onChange={onChange} />
          </Row>
        </Form>
      </ProCard>

      <ModalForm
          title='添加头部'
          form={formRef}
          open={modalVisit}
          onFinish={(values) => {
           handleHeader(values);
            return true;
          }}
          onOpenChange={setModalVisit}
          layout="inline"
        >
          <ProFormText
            name="key"
            label="键"
            placeholder="请输入对应的键"
          />
         
          <ProFormText
            name="value"
            label="值"
            placeholder="请输入对应的值"
          />
        </ModalForm>
    </PageContainer>
  );
};

export default ProjectToolPage;
